<template>
	<view>
		<image class="head" mode="widthFix" :src="imgArr[0]" @click="headf(imgArr[0])"></image>
		
		<button class="change" @click="changeimg">点击更换头像</button>
		
		<view class="modify1">
			<view class="name">
				<text>姓名</text>
				<view class="Your_Name">
					<text>{{name}}</text>
				</view>
				<view class="Change_name" @click="Chang_name">></view>
			</view>
			
			<view class="Gender">
				<text>性别</text>
				<view class="Gender_choice">
					<text>{{Genber}}</text>
				</view>
				<view class="Change_gender" @click="Change_genber">></view>
			</view>
			
			<view class="Age">
				<text>年龄</text>
				<view class="Age_number">
					<text>{{Age}}</text>
				</view>
				<view class="Change_Age" @click="Change_Age">></view>
			</view>
		</view>
		
		<view class="modify2">
			<view class="Student">
				<text>学号</text>
				<view class="Your_Student">
					<text>{{Student}}</text>
				</view>
				<view class="Change_Student" @click="Change_Student">></view>
			</view>
			
			<view class="mobile_phone">
				<text>手机号</text>
				<view class="Your_mobile_phone">
					<text>{{mobile_phone}}</text>
				</view>
				<view class="Change_mobile_phone" @click="Change_mobile_phone">></view>
			</view>
			
			<view class="QQ_number">
				<text>QQ号</text>
				<view class="Your_QQ_number">
					<text>{{QQ_number}}</text>
				</view>
				<view class="Change_QQ" @click="Change_QQ">></view>
			</view>
			
			<view class="wechat_number">
				<text>微信号</text>
				<view class="Your_wechat_number">
					<text>{{wechat_number}}</text>
				</view>
				<view class="Change_wechat" @click="Change_wechat">></view>
			</view>
		</view>
		
		<view class="modify3">
			<view class="post">
				<text>职务</text>
				<view class="Your_post">
					<text>{{post}}</text>
				</view>
				<view class="Change_post" @click="Change_post">></view>
			</view>
			
			<view class="class1">
				<text>所在班级</text>
				<view class="Your_class1">
					<text>{{class1}}</text>
				</view>
				<view class="Change_class1" @click="Change_class1">></view>
			</view>
			
			<view class="department">
				<text>所属部门</text>
				<view class="Your_department">
					<text>{{department}}</text>
				</view>
				<view class="Change_department" @click="Change_department">></view>
			</view>
			
		</view>
	</view>
</template> 

<script>
	export default {
		data() {
			return {
				name:"开心甜土豆",//名字
				Genber:"男",//性别
				Age:"21",//年龄
				Student:"215602130325",//学号
				mobile_phone:"13471555334",//手机号
				QQ_number:"13471555334",//QQ号
				wechat_number:"13471555334",//微信号
				post:"会长",//职务
				class1:"计应专1111班",//班级
				department:"技术部",//部门
				imgArr:["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf8b79d-d470-482b-a323-477b967ac823/4dcb8914-9578-4dbe-82c5-634a5ebe83ef.png"],
			}
		},
		methods: {
			changeimg(){
				//上传图片的路径
					uni.chooseImage({
						count:1,
						success:res=>{
							this.imgArr = res.tempFilePaths
						}
					})
				},
				headf(current){
					//预览图片
					console.log(current)
					uni.previewImage({
						current,
						urls:this.imgArr
					})
				}
			}
		}
	
</script>

<style lang="scss">
	
	.page{
		background: #f5f7fa;
	}
	
	.change{
		/* 点击更换头像 */
		position: absolute;
		left: 35%;
		top: 400rpx;
		width: 236rpx;
		height: 70rpx;
		font-family: SourceHanSansCN-Regular;
		font-size: 30rpx;
		font-weight: normal;
		color: #080000;
	}
	.head{
		/* 头像 */
		left: 250rpx;
		top: 30rpx;
		width: 250rpx;
		height: 320rpx;
		border-radius: 20rpx;
		// background: url(../../static/PC/head_portrait.png);
		// background: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf8b79d-d470-482b-a323-477b967ac823/4dcb8914-9578-4dbe-82c5-634a5ebe83ef.png");

	}
	.modify3{
		/* 职务 班级 部门 */
		position: absolute;
		left: 0rpx;
		top: 1190rpx;
		min-width: 100%;
		height: 260rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.3);
		.department{
			/* 所属部门 */
			display: flex;
			line-height: 100rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Your_department{
				position: absolute;
				left: 40%;
			}
			.Change_department{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
		.class1{
			/* 所在班级 */
			display: flex;
			line-height: 50rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Your_class1{
				position: absolute;
				left: 40%;
			}
			.Change_class1{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
		.post{
			/* 职务 */
			display: flex;
			line-height: 100rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Your_post{
				position: absolute;
				left: 40%;
			}
			.Change_post{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
	}
	.modify2{
		/* 微信 QQ 手机号 学号 */
		position: absolute;
		left: 0rpx;
		top: 800rpx;
		min-width: 100%;
		height: 350rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.3);
		.wechat_number{
			/* 微信号 */
			display: flex;
			line-height: 50rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Your_wechat_number{
				position: absolute;
				left:40%;
			}
			.Change_wechat{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
		.QQ_number{
			/* QQ号 */
			display: flex;
			line-height: 100rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Your_QQ_number{
				position: absolute;
				left: 40%;
			}
			.Change_QQ{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
		.mobile_phone{
			/* 手机号 */
			display: flex;
			line-height: 50rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Your_mobile_phone{
				position: absolute;
				left: 40%;
			}
			.Change_mobile_phone{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
		.Student{
			/* 学号 */
			display: flex;
			line-height: 100rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Your_Student{
				position: absolute;
				left: 40%;
			}
			.Change_Student{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
	}
	.modify1{
		/*姓名  性别  年龄的容器*/
		position: absolute;
		left: 0rpx;
		top: 500rpx;
		min-width: 100%;
		height: 260rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.3);
		.Age{
			/* 年龄 */
			display: flex;
			line-height: 100rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Age_number{
				position: absolute;
				left: 40%;
			}
			.Change_Age{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
		.Gender{
			/* 性别 */
			display: flex;
			line-height: 50rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Gender_choice{
				position: absolute;
				left: 40%;
			}
			.Change_gender{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
		
		.name{
			/* 姓名 */
			display: flex;
			line-height: 100rpx;
			margin-left: 50rpx;
			width: 100%;
			font-size: 34rpx;
			.Your_Name{
				position: absolute;
				left: 40%;
			}
			.Change_name{
				position: absolute;
				left: 85%;
				font-size: 50rpx;
			}
		}
	}
</style>
